<script setup lang="ts">
  import { InputSearch } from '@arco-design/web-vue';
  import { toRefs } from 'vue';
  import searchImg from '/@/views/pins/components/img/search.png';
  interface SearchHeaderProps {
    placeholder?: string;
    maxLength?: number;
    allowClear?: boolean;
  }

  const props = withDefaults(defineProps<SearchHeaderProps>(), {
    placeholder: '搜索沸点',
    maxLength: 100,
    allowClear: true,
  });

  const { placeholder, maxLength } = toRefs(props);
</script>

<template>
  <!-- <div
    class="gradient-bg w-full h-full bg-gradient-to-r from-[#c0c0f9] to-[#f2bed4] flex items-center justify-center"
  > -->
  <div class="gradient-bg w-full h-full flex items-center justify-center">
    <div class="!w-[650px] h-full flex items-center relative">
      <input-search
        class="c-search w-full h-[50px] !rounded-[50px] !px-[24px] z-10"
        :placeholder="placeholder"
        :max-length="maxLength"
        :allow-clear="allowClear"
      />
      <img
        :src="searchImg"
        alt=""
        class="w-[297px] h-[297px] object-cover absolute top-[56px] left-[-169px] z-0"
      />
    </div>
  </div>
</template>
<style>
  @keyframes gradientBg {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  } /* .gradient-bg {
    background-size: 600% 600%;
    animation: gradientBg 3s ease infinite;
  } */
  /* .gradient-bg {
    background-image: url(./img/search.png);
    background-repeat: no-repeat;
    background-position: 200px 44px;
  } */

  .c-search {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .c-search::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    filter: drop-shadow(0px 4px 20px rgba(0, 29, 86, 0.25));
    border-radius: 33px;
    border: 2px dashed rgba(0, 0, 0, 0.65);
  }

  .c-search.arco-input-wrapper.arco-input-focus {
    border: none !important;
  }
</style>
